<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content relative" id="compact" v-show="!previewType">
      <h1>{{form.sponsorTitle + form.rightsName + '赞助合作协议书'}}</h1>
      <ul class="mod-steps">
        <li class="active"><p>1</p><span>项目方拟定合同</span></li>
        <li><p>2</p><span>赞助方确认合同</span></li>
        <li><p>3</p><span>合同内容确定，双方签署</span></li>
        <li><p>4</p><span>签署成功，合同生效</span></li>
      </ul>
      <el-form
        ref="form"
        v-bind="getFormProps({labelWidth:'150px'})"
        :model="form"
        class="train-form">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="甲方（赞助方）："
              prop="firstName"
              :rules="{ required: true, message: '该项必填'}">
                <template>
                  <el-input
                    style="width: 290px;"
                    :maxlength="40"
                    v-model="form.firstName"
                    placeholder=""
                    number-word />
                </template>
            </el-form-item>
            <el-form-item
              label="地址："
              prop="firstAddress"
              :rules="{ required: true, message: '该项必填'}">
                <template>
                  <el-input
                    style="width: 290px;"
                    :maxlength="40"
                    v-model="form.firstAddress"
                    placeholder=""
                    number-word />
                </template>
            </el-form-item>
            <el-form-item
              label="联系方式："
              prop="firstContact"
              :rules="[
                { required: true, message: '该项必填'},
                validator.rule.isPhoneAndLandline,
              ]">
                <template>
                  <el-input
                    v-model="form.firstContact"
                    placeholder="">
                  </el-input>
                </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="乙方（项目方）："
              prop="secondName"
              :rules="{ required: true, message: '该项必填'}">
                <template>
                  <el-input
                    style="width: 290px;"
                    :maxlength="40"
                    v-model="form.secondName"
                    placeholder="" number-word />
                </template>
            </el-form-item>
            <el-form-item
              label="地址："
              prop="secondAddress"
              :rules="{ required: true, message: '该项必填'}">
                <template>
                  <el-input
                    style="width: 290px;"
                    :maxlength="40"
                    v-model="form.secondAddress"
                    placeholder="" number-word />
                </template>
            </el-form-item>
            <el-form-item
              label="联系方式："
              prop="secondContact"
              :rules="[
                { required: true, message: '该项必填'},
                validator.rule.isPhoneAndLandline,
              ]">
                <template>
                  <el-input
                    v-model="form.secondContact"
                    placeholder="">
                  </el-input>
                </template>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="hr"></div>
        <el-form-item
          prop="sponsorTitle"
          v-bind="getFormProps({labelWidth:'0'})"
          :rules="{ required: true, message: '该项必填'}">
            <template>
              <el-input
                style="margin: 5px 0;"
                v-model="form.firstName"
                :disabled="true">
              </el-input>
              有限公司 （以下简称“甲方”）与
              <el-input
                style="margin: 5px 0;"
                v-model="form.secondName"
                :disabled="true">
              </el-input>
              (以下简称“乙方”）,本着诚实信用，自愿平等互利的宗旨，经过双方认真协商就乙方举办的项目
              <el-input
                :maxlength="40"
                style="width:380px;display: inline-block;margin: 5px 0;"
                v-model="form.sponsorTitle" number-word />
            </template>
        </el-form-item>
        <p>达成以下协议：</p>
        <el-form-item
          prop="sponsorTitle"
          label="一、乙方诚邀甲方成为："
          v-bind="getFormProps({labelWidth:'auto'})">
            <template>
              <el-input
                style="width:380px"
                v-model="form.sponsorTitle"
                :disabled="true"
                placeholder="">
              </el-input>
              的
              <el-input
                :maxlength="40"
                style="width:380px;display: inline-block;"
                v-model="form.rightsName"
                placeholder="" number-word />
              合作商。
            </template>
        </el-form-item>
        <el-form-item
          prop="activityContent"
          label="二、活动内容："
          v-bind="getFormProps({labelWidth:'auto'})"
          :rules="{}">
            <template>
              <el-col :span="20">
                <el-input
                  :maxlength="40"
                  v-model="form.activityContent" number-word />
              </el-col>
            </template>
        </el-form-item>
        <el-form-item
          prop="timeAndAddress"
          label="三、时间地点："
          v-bind="getFormProps({labelWidth:'auto'})"
          :rules="{}">
            <template>
              <el-col :span="20">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3}"
                :maxlength="300"
                placeholder=""
                v-model="form.timeAndAddress" number-word />
                </el-col>
            </template>
        </el-form-item>
        <el-form-item
          prop="matchId"
          label="四、为推动“"
          v-bind="getFormProps({labelWidth:'auto'})"
          :rules="{}">
            <template>
              <el-input
                style="width:430px"
                v-model="form.sponsorTitle"
                :disabled="true"
                placeholder="">
              </el-input>
               ” 的举行，乙方负责活动组织及协调、推广，甲方承诺向乙方提供赞助支持:
            </template>
        </el-form-item>
        <el-form-item
          prop="cashTotalAmount"
          label="1.现金支持人民币"
          v-bind="getFormProps({labelWidth:'132px'})"
          :rules="{ required: true, message: '该项必填'}">
            <template>
              <e-input-money
                class="nounit"
                :max="1000000000"
                v-model="form.cashTotalAmount"
                @change="handleChangeCash(form.cashTotalAmount)">
              </e-input-money> 元
            </template>
        </el-form-item>
        <el-form-item
          prop="materialTotalAmount"
          label="2.实物或服务价值人民币"
          v-bind="getFormProps({labelWidth:'174px'})"
          :rules="{ required: true, message: '该项必填'}">
            <template>
              <e-input-money
                class="nounit"
                :max="1000000000"
                v-model="form.materialTotalAmount"
                @change="handleChangeMaterial(form.materialTotalAmount)">
              </e-input-money> 元
            </template>
        </el-form-item>
        <h3>五、甲方权利和义务</h3>

        <p>1.甲方在乙方举办的活动“
          <el-input
            style="width: 340px;"
            v-model="form.sponsorTitle"
            :disabled="true"
            placeholder="">
          </el-input>
           ”中享有的
          <el-input
            style="width: 340px;"
            v-model="form.rightsName"
            :disabled="true"
            placeholder="">
          </el-input> 合作商资格。
        </p>
        </el-form-item>
        <p>2.活动权益及相关回报详见附件1;</p>
        <p>3.积极配合乙方参与现场活动，并保证活动正常进行;</p>
        <p>4.甲方所赞助物资（现金、物品、服务）需要按相应的价值、数量和合同约定时间内交付。交付相关详见附近2.</p>
        <p>5.甲方在乙方许可下可使用活动的图像与影像资料。　</p>
        <h3>六、乙方权利和义务 　</h3>
        <p>1.乙方拥有本次活动全程解释权和组织权利; 　</p>
        <p>2.乙方拥有代收本次活动赞助费用和全权调配使用该费用的权利;</p>
        <p>3.负责实施活动进度协调、相关合作方议会召开与协调等；</p>
        <p>4.负责本次活动网络及相关的宣传（如微信公众平台、微博、H5制作宣传）；</p>
        <p>5.负责本次活动地协调及按排布置、提供活动所需的人务支持，以筹备与举办该项活动。</p>
        <p>6.及时向合作伙伴通告筹备进展，并承诺在授权范围内使用其品牌名称，并遵守一切相关联之法规。</p>
        <p>7.活动所需物料（如邀请函、宣传册、媒介、活动主北景板等）出现赞助企业的名称与LOGO。　</p>
        <div class="hr"></div>
        <h3>七、知识产权条款及保密</h3>
        <p>1.甲、乙双方同意，在对方提供服务过程中可能需要接触、了解对方的经营、管理信息，这些信息对双方中的某一方来说是非常重要的，一旦泄露，将使某一方丧失竞争优势或处于不利地位，因此，任一方保证对其在工作中知悉到的（不论是对方提供的还是偶然获得的）任何对方的经营管理信息，以及任一方为履行本协议而向对方披露的文件、资料和经营、管理、流程、文件，负有严格的保密义务，不得以任何形式予以公开、发表或向任何第三方提供、泄露。</p>
        <p>2.保密期限不受本协议期限的限制。在本合同期限届满后，双方仍应保护对方的商业秘密。</p>
        <h3>八、违约责任</h3>
        <p>1.任何一方有证据表明对方已经、正在或将要违约，可以中止履行本合同，但应及时通知对方。若对方继续不履行、履行不当或者违反本合同，该方可以解除本合同并要求对方赔偿本次活动以现金或实物服务等价值的 损失。</p>
        <p>2.因不可抗力而无法承担责任的一方，应在不可抗力发生的 3 天内，及时通知另一方。</p>
        <p>3.一方因不可抗力确实无法承担责任，而造成损失的，不付赔偿责任。本合同所称不可抗力是指不能预见、不能克服并且不能避免的客观事件，包括但不限于自然灾害如洪水、地震、火灾和风暴等以及社会事件如战争、动乱、政府行为等。</p>
        <h3>九、其它</h3>
        <p>1.如果本合同任何条款根据现行法律被确定为无效或无法实施，本合同的其他所有条款将继续有效。此种情况下，双方将以有效的约定替换该约定，且该有效约定应尽可能接近原约定和本合同相应的精神和宗旨。</p>
        <el-form-item
          prop="contractEndTime"
          label="2.本合同经双方授权代表签字并盖章，自签订日起生效至"
          v-bind="getFormProps({labelWidth:'370px'})"
          :rules="{ required: true, message: '该项必填'}">
            <template>
              <el-col :span="10">
                <el-date-picker
                  v-model="form.contractEndTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker> 为止。
              </el-col>
            </template>
        </el-form-item>
        <p>3.本合同一式两份，双方当事人各执一份，具有同等法律效力</p>
        <h3>十、本协议未尽事宜，由双方协商解决。协商解决不成的，任何一方可向乙方方所在地人民法院诉讼。</h3>
        <div class="hr"></div>
        <h2>合同附件1</h2>
        <div class="accessory">
          <h3>对于本次活动的合作商
            <el-input
              style="width: 300px;"
              v-model="form.secondName"
              :disabled="true"
              placeholder="">
            </el-input>
                              享有以下权益及回报：
          </h3>
          <el-form-item
            prop="matchId"
            v-bind="getFormProps({labelWidth:'auto'})"
            :rules="{}">
              <template>
                <div v-for="(item,index) in form.rightsDetailList" :key="index" :dataList="item" class="rightsDetailList">
                  <h3>{{item.title}}</h3>
                  <right-group :value="item.list" :maxItem="5"></right-group>
                </div>
              </template>
          </el-form-item>
        </div>
        <h2>合同附件2</h2>
        <div class="accessory">
          <h3>对于本次活动的合作商
            <el-input
              style="width: 300px;"
              v-model="form.secondName"
              :disabled="true"
              placeholder="">
            </el-input> 的赞助支付（交付）执行，请按以下约定执行：
          </h3>
          <div v-if="form.cashTotalAmount>0">
            <el-form-item
              prop="matchId"
              label="现金金额："
              v-bind="getFormProps({labelWidth:'auto'})"
              :rules="{}">
                <template>
                  {{form.cashTotalAmount / 100}}元
                </template>
            </el-form-item>
            <el-form-item
              prop="split"
              label="分期支付："
              v-bind="getFormProps({labelWidth:'82px'})"
              :rules="[
                validator.rule.isIntadd,
                rules.paymentList
              ]">
                <template>
                  <el-row>
                    <el-col :span="5"> 分
                      <el-input
                        style="width: 60px;"
                        v-model="form.split"
                        @change="handlePaynumChange">
                      </el-input> 期支付
                    </el-col>
                    <el-col :span="17">
                      <div class="payOrderList" v-for="(item, index) in form.paymentList">
                        <el-date-picker
                          v-model="item.cashPaymentDate"
                          type="date"
                          placeholder="选择日期">
                        </el-date-picker> 之前，支付第{{index + 1}}期赞助款项
                        <e-input-money
                          class="nounit"
                          :max="1000000000"
                          style="width: 100px;"
                          v-model="item.cashAmout">
                        </e-input-money> 元；
                      </div>
                    </el-col>
                  </el-row>
                </template>
            </el-form-item>
          </div>
          <div :class="(form.cashTotalAmount>0 && form.materialTotalAmount>0)?'hr-dashed':''"></div>
          <div v-if="form.materialTotalAmount>0">
            <el-form-item
              label="实物总价："
              prop="materialPaymentDate"
              :rules="{ required: true, message: '该项必填'}"
              v-bind="getFormProps({labelWidth:'93px'})">
              <template>
                <el-row>
                  <el-date-picker
                    v-model="form.materialPaymentDate"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker> 之前，交付实物总价
                  <e-input-money style="width: 100px;"
                    class="nounit"
                    :max="1000000000"
                    :disabled="true"
                    v-model="form.materialTotalAmount">
                  </e-input-money> 元；
                </el-row>
              </template>
            </el-form-item>
            <div class="linkbox">
              <el-form-item
                prop="materialDetail"
                label="赞助物资包括"
                v-bind="getFormProps({labelWidth:'auto'})"
                :rules="{}">
                <template>
                  <el-input
                    type="textarea"
                    v-model="form.materialDetail"/>
                </template>
              </el-form-item>
              <el-row>
                <el-col :span="10">
                  <el-form-item
                    prop="expressContact"
                    label="联系人"
                    v-bind="getFormProps({labelWidth:'68px'})"
                    :rules="{ required: true, message: '该项必填'}">
                    <template>
                      <el-col :span="20">
                        <el-input
                          class="w-100"
                          :maxlength="40"
                          v-model="form.expressContact" number-word />
                      </el-col>
                    </template>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item
                    prop="expressPhone"
                    label="手机号"
                    v-bind="getFormProps({labelWidth:'68px'})"
                    :rules="[
                      { required: true, message: '该项必填'},
                      validator.rule.isPhone,
                    ]">
                    <template>
                      <el-col :span="20">
                        <el-input
                          class="w-100"
                          v-model="form.expressPhone"/>
                      </el-col>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                prop="expressAddress"
                label="收货地址"
                v-bind="getFormProps({labelWidth:'auto'})"
                :rules="{}">
                <template>
                  <el-col :span="20">
                    <el-input
                      class="w-100"
                      type="textarea"
                      :maxlength="300"
                      v-model="form.expressAddress" number-word/>
                  </el-col>
                </template>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="button-box">
          <el-button type="primary" native-type="submit" :loading="loading">确定提交</el-button>
          <el-button @click="preview">预览</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </div>
      </el-form>
      <div class="feedback" 
        v-if="form.contractSugList && form.contractSugList.length>0"
        :style="{ left: (feedbackLeft-1200>0?(feedbackLeft/2 + 600):1200) + 'px' }">
        <div class="type-off"
          v-bind:hidden="feedback == true"
          @click="feedback = true">意见反馈
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="type-on" v-bind:hidden="feedback == false">
          <div class="title">意见反馈
            <a href="javascript:"  @click="feedback = false">
              <i class="el-icon-close"></i>
            </a>
          </div>
          <div class="info">
            <li v-for="(item, index) in form.contractSugList">
              <p class="time">{{item.createTime | FormatDate}}</p>
              <p>{{item.auditType}}</p>
              <p>{{item.auditRemark}}</p>
            </li>
          </div>
        </div>
      </div>
    </div>
    <div class="content relative" v-show="previewType">
      <div id="loading" v-if="!previewImg">
        <img src="/static/images/sponsor/timg.gif"/>
        <p>合同生成中...</p>
      </div>
      <img v-else :src="previewImg" class="previewImg"/>
      <!--<img :src="'http://org.htxk.dev/api/sponsor/contract/?contractId=SPONSOR_CONTRACT_PREVIEW_SAVE_74_48_90'">-->
      <div class="button-box compactShowBtn">
        <el-button type="primary" @click="previewType = false; previewImg = ''">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { form } from 'utils/mixins' // 引入form mixin
  import CompactRight from './components/CompactRight'
  import RightGroup from './components/RightGroup'
  import validator from '../../../utils/validator'
  import EInputMoney from '@e-ui/InputMoney'
  import api from 'api/merchants'
  export default {
    components: {
      CompactRight, RightGroup, EInputMoney
    },
    mixins: [form],
    data () {
      let _this = this
      return {
        validator,
        loading: false,
        contractId: this.$route.params.contractId,
        bidId: this.$route.params.bidId,
        feedback: true,
        feedbackLeft: document.body.clientWidth - 15,
        previewType: false,
        previewId: '',
        previewImg: '',
        form: {
          merId: '',
          bidId: '',
          firstName: '',
          firstAddress: '',
          firstContact: '',
          secondName: '',
          secondAddress: '',
          secondContact: '',
          sponsorTitle: '',
          rightsName: '',
          activityContent: '',
          timeAndAddress: '',
          cashTotalAmount: 0,
          materialTotalAmount: 0,
          contractEndTime: '',
          split: 1,
          paymentList: [
            {
              cashPaymentDate: '',
              cashAmout: ''
            }
          ],
          materialPaymentDate: '',
          materialAmout: '',
          materialDetail: '',
          expressContact: '',
          expressPhone: '',
          expressAddress: '',
          rightsDetailList: [
            {
              title: '官方授权权益',
              list: [
                {
                  text: ''
                }
              ]
            },
            {
              title: '现场广告权益',
              list: [
                {
                  text: ''
                }
              ]
            },
            {
              title: '电视媒体权益',
              list: [
                {
                  text: ''
                }
              ]
            },
            {
              title: '其他权益',
              list: [
                {
                  text: ''
                }
              ]
            }
          ]
        },
        rules: {
          description: [
            {required: true, message: '招商简介不能为空'},
            {min: 8, message: '招商简介至少为8个字'}
          ],
          paymentList: {
            validator (rule, value, callback) {
              let list = _this.form.paymentList
              let DateError = 0
              let MoneyError = 0
              if (_this.form.split > 5) {
                callback(new Error('不得大于5期!'))
              }
              if (list.length > 0) {
                list.forEach(item => {
                  if (!item.cashPaymentDate || item.cashPaymentDate === '') {
                    DateError++
                  } else if (!item.cashAmout || item.cashAmout === '') {
                    MoneyError++
                  }
                })
                if (DateError > 0) {
                  callback(new Error('交付日期必填!'))
                } else if (MoneyError > 0) {
                  callback(new Error('交付金额必填!'))
                } else {
                  callback()
                }
              } else {
                // callback(new Error('最小分1期!'))
              }
            }
          }
        }
      }
    },
    created () {
      this.$store.commit('LAYOUT_GRID', false)
      if (this.bidId) {
        api.contract_details({bidId: this.bidId}).then((json) => {
          this.form = json.data
          this.form.split = 1
          this.form.paymentList = [
            {
              cashPaymentDate: '',
              cashAmout: ''
            }
          ]
          this.form.materialPaymentDate = ''
          this.form.rightsDetailList = [
            {
              title: '官方授权权益',
              list: [
                {
                  text: ''
                }
              ]
            },
            {
              title: '现场广告权益',
              list: [
                {
                  text: ''
                }
              ]
            },
            {
              title: '电视媒体权益',
              list: [
                {
                  text: ''
                }
              ]
            },
            {
              title: '其他权益',
              list: [
                {
                  text: ''
                }
              ]
            }
          ]
        }).catch(() => {
          this.$router.go(-1)
        })
      } else if (this.contractId) {
        api.contract_details_edit({contractId: this.contractId}).then((json) => {
          this.form = json.data
        }).catch(() => {
          this.$router.go(-1)
        })
      }
      window.onresize = () => {
        this.feedbackLeft = document.body.clientWidth
      }
    },
    destroyed () {
      this.$store.commit('LAYOUT_GRID', true)
    },
    watch: {
      previewId: {
        handler: function (val, oldVal) {
          api.contract_preview_show({contractId: val}, {context: this, successMsg: 'none'}).then((json) => {
            this.previewImg = 'data:image/png;base64,' + json.data
          })
        },
        deep: true
      }
    },
    methods: {
      submit () {
        this.$confirm('请确认您已经填写了真实、完整的合同内容。合作过程中双方发生争议纠纷，合同将是法律进行争议处理的重要依据。',
          '提示'
        ).then(() => {
          this.form.contractName = this.form.sponsorTitle + this.form.rightsName + '赞助合作协议书'
          if (this.form.contractSugList === '') {
            this.form.contractSugList = []
          }
          api.contract_add(JSON.stringify(this.form), {context: this, successMsg: '提交成功'}).then((json) => {
            this.$router.push({path: '/sponsor/merchants/compact/manage/' + this.form.merId})
          })
        }).catch(() => {
        })
      },
      handlePaynumChange () {
        let nowlength = this.form.paymentList.length
        if (this.form.split > nowlength) {
          for (let i = 0; i < (this.form.split - nowlength); i++) {
            this.form.paymentList.push({
              cashPaymentDate: '',
              cashAmout: ''
            })
          }
        } else {
          this.form.paymentList = this.form.paymentList.slice(0, this.form.split)
        }
      },
      preview () { // 预览合同
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.form.contractName = this.form.sponsorTitle + this.form.rightsName + '赞助合作协议书'
            api.contract_preview_save(JSON.stringify(this.form), {context: this, successMsg: 'none'}).then((json) => {
              this.previewType = true
              this.previewId = json.data
            })
          }
        })
      },
      handleChangeCash (value) {
        if (value === 0) {
          this.form.split = 0
          this.form.paymentList = []
        } else if (this.form.split === 0) {
          this.form.split = 1
          this.form.paymentList = [
            {
              cashPaymentDate: '',
              cashAmout: ''
            }
          ]
        }
      },
      handleChangeMaterial (value) {
        if (value === 0) {
          this.form.materialPaymentDate = ''
          this.form.expressContact = ''
          this.form.materialDetail = ''
          this.form.expressPhone = ''
          this.form.expressAddress = ''
        }
      }
    }
  }
</script>
<style lang="scss">
  
  #compact{
    h1{
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 50px;
    }
    .compact-input{
      border-bottom: 1px solid #000000;
      text-align: center;
      &:focus {
        outline: none;
        background-color: transparent;
      }
    }
    .hr{
      border-top: 1px solid $border-color-base;
      margin: 40px auto;
    }
    .hr-dashed{
      border-bottom: 1px dashed $border-color-base;
      margin: 30px 0;
    }
    h3{
      font-size: 14px;
      margin-bottom: 10px;
      margin-top: 30px;
    }
    h2{
      font-size: 16px;
      margin-bottom: 10px;
    }
    p{
      line-height: 28px;
    }
    .compact-text{
      width: 100%;
    }
    .accessory{
      border: 1px dashed #dddddd;
      padding: 20px;
      margin-bottom: 15px;
    }
    .payOrderList{
      margin-bottom: 10px;
    }
    .linkbox{
      margin-left: 85px;
    }
    .w-100{
      width: 100%;
    }
    .el-form-item__label {
      color: #333;
    }
    .bold{
      font-weight: bold;
      .el-form-item__label {
        font-weight: bold;
      }
    }
    .el-button--text {
      color: #333;
    }
  }
  .compact-bottom{
    position: fixed;
    bottom: 0;
    left: 50%;
    max-width: 1200px;
    width: 100%;
    transform: translate(-50%,0);
    background: #FFFFFF;
    height: 50px;
    text-align: center;
  }
  .mod-steps{
    margin: 10px 0px 120px;
    &:before{
      content: "";
      display:inline-block;
      width:100%;
      height:1px;
      background:#e5e5e5;
      position:relative;
      top:15px;
      z-index: 1;
    }
    li{
      position:relative;
      z-index: 3;
      float: left;
      min-width:270px;
      text-align: center;
      p{
        width:22px;
        height:22px;
        border-radius:50%;
        text-align: center;
        margin:0 auto;
        line-height: 22px !important;
        border:1px #e5e5e5 solid;
        margin-bottom: 15px;
        background: white;
        color:#E5E5E5;
      }
      span{
      }
      &.active{
        p{
          border-color: $color-primary;
          color: #fff;
          background: $color-primary;
        }
        span{
          color: $color-primary;
        }
      }
    }
  }
  .feedback{
    position: fixed;
    top: 200px;
    width: 330px;
    .type-on{
      border: 1px solid #e5e5e5;
      background: #fafafa;
      padding: 12px 10px 15px 12px;
      .title{
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 20px;
        height: 20px;
        width: 100%;
        text-align: left;
        i{
          font-weight: normal;
          float: right;
        }
      }
      .info{
        overflow-y: auto;
        max-height: 500px;
        li{
          list-style: none;
          p{
            line-height: 20px !important;
            font-size: 14px;
            color: $color-black-base;
            &.time{
              margin: 15px 0;
            }
          }
        }
      }
    }
    .type-off{
      border: 1px solid #e5e5e5;
      background: #fafafa;
      width: 100px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .previewImg{
    width: 100%;
  }
  #loading{
    margin: 40px 0 100px 0;
    text-align: center;
    p{
      font-size: 16px;
    }
  }
  .compactShowBtn{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border-top: 1px solid $border-color-base;
    padding: 30px 0;
    margin-bottom: 0;
  }
</style>
